<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<title>机器组别管理-编辑</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<link rel="stylesheet" href="layui/css/admin.css" media="all">
		<style>
			.layui-tree-skin-shihuang .layui-tree-branch {
				display: none;
			}
			
			.no-ground
			 {
				list-style: none;
				border: 1px solid black;
				height: 310px;
				overflow-y: scroll;
			}
			.this-ground
			{
				list-style: none;
				border: 1px solid black;
				height: 310px;
				overflow-y: scroll;
				display: block;
			}
			
			.btn {
				list-style: none;
				height: 310px;
				text-align: center;
				margin: 0 auto;
				padding-top: 80px;
			}
			
			.btn li button {
				width: 50px;
				height: 30px;
				margin-top: 20px;
			}
		</style>

	</head>

	<body>
		<div class="layui-container">
			<div class="layui-card">
				<div class="layui-row">
					<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
						<div class="layui-card-header"><span style="font-weight: bold; font-size: 22px;">编辑机器组别</span></div>
					</div>
				</div>
				<div class="layui-row layui-card-body ">
					<div class="layui-col-xs4 layui-col-sm4 layui-col-md2" style="height: 500px; border: 1px solid gainsboro;">
						<ul id="tree" class="layui-tree-skin-shihuang"></ul>
					</div>
					<div class="layui-col-xs8 layui-col-sm8 layui-col-md10 ">
						<form class="layui-form" action="" style="margin-left: 50px;">

							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">组别名称：</label>
									<div class="layui-input-inline">
										<input type="text" name="machineId" lay-verify="required" autocomplete="off" class="layui-input" value="珠江新城">
									</div>
								</div>

							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">上级组别：</label>
									<div class="layui-input-inline">
										<input type="text" name="machineId" lay-verify="required" autocomplete="off" class="layui-input" value="天河区">
									</div>
								</div>

							</div>
							<div class="layui-form-item">

								<div class="layui-inline">
									<label class="layui-form-label">组别状态：</label>
									<div class="layui-input-inline">
										<select>
											<option value="">请选择状态</option>
											<option selected="">正常</option>
											<option>作废</option>

										</select>
									</div>
								</div>
							</div>
							<div class="layui-form-item">

								<div class="layui-inline" style=" margin-left:110px;">
									<button class="layui-btn  select">保存</button>

									<button class="layui-btn  layui-btn-warm reset" type="reset" id="back">返回</button>
								</div>
							</div>
						</form>

						<div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="padding-top: 20px; padding-left: 70px;">
							<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 left">
								<span style="font-weight: bold; font-size: 22px; margin-bottom: 10px;" class="layui-col-xs12 layui-col-sm12 layui-col-md12">未分组机器</span>
								<ul class="layui-col-xs12 layui-col-sm12 layui-col-md12 no-ground" id="no-ground">

								</ul>
							</div>
							<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 ">
								<ul class="layui-col-xs12 layui-col-sm12 layui-col-md12 btn">
									<li><button type="button" id="add-left"><</button></li>
									<li><button type="button" id="add-right">></button></li>
									<li><button type="button" id="add-left-all"><<</button></li>
									<li><button type="button" id="add-right-all">>></button></li>
								</ul>
							</div>
							<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 left">
								<span style="font-weight: bold; font-size: 22px; margin-bottom: 10px;" class="layui-col-xs12 layui-col-sm12 layui-col-md12">该组别下机器</span>
								<ul class="layui-col-xs12 layui-col-sm12 layui-col-md12 this-ground" id="this-ground">

								</ul>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>

		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="layui/layui.js"></script>
		<script>
			layui.use(['form', 'tree'], function() {
				var form = layui.form;

				layui.tree({
					elem: '#tree' //指定元素
						,
					target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
						,
					click: function(item) { //点击节点回调
						layer.msg('当前节名称：' + item.name + '<br>全部参数：' + JSON.stringify(item));
						console.log(item);
					},
					nodes: [ //节点
						{
							name: '全部',
							id: 1,
							spread: true,
							children: [{
									name: '天河区',
									id: 11,
									spread: true,
									children: [{
										name: '珠江新城',
										id: 111

									}, {
										name: '五羊新城',
										id: 112
									}, {
										name: '天河城',
										id: 113
									}]
								},
								{
									name: '海珠区',
									id: 21,
									spread: false,
									children: [{
										name: '客村立交',
										id: 211

									}, {
										name: '万胜围',
										id: 212
									}]

								},
								{
									name: '荔湾区',
									id: 3
								}
							]
						}

					]
				});

			});
			$('#back').click(function() {
				//alert(11)
				window.location.href = "machine-ground.html";

			});
			$(function() {
				var li = $("<li>无阻别C</li><li无阻别D</li><li>无阻别E</li><li>无阻别F</li>");
				var list1 = [];
				var list2 = [];

				$("#no-ground").append(li);
				$("#no-ground").on("click","li",function(){//事件委托
			   
						$(this).eq(0).css("background", "#99CCFF");

						list1.push($(this));
					});
					
					$("#this-ground").on("click","li",function(){//事件委托
			   
						$(this).eq(0).css("background", "#99CCFF");

						list2.push($(this));
					});
				$('#add-right').click(function() {
					//$(value).appendTo($('#this-ground'));
					for(var x = 0; x < list1.length; x++) {
						list1[x].remove();
					}

					for(var x = 0; x < list1.length; x++) {
						$('#this-ground').append("<li>"+list1[x].text()+"</li>");
					}

					list1 = [];

				})
				
				$('#add-left').click(function() {
					//$(value).appendTo($('#this-ground'));
					for(var x = 0; x < list2.length; x++) {
						list2[x].remove();
					}

					for(var x = 0; x < list2.length; x++) {
						$('#no-ground').append("<li>"+list2[x].text()+"</li>");
					}

					list2 = [];

				})
				$('#add-right-all').click(function(){
					$('#no-ground li').appendTo($('#this-ground'));
				})
				$('#add-left-all').click(function(){
					$('#this-ground li').appendTo($('#no-ground	'));
					
					
				})

			})
		</script>
	</body>

</html>